
<template>
    <div>
       <Card>
        <p slot="title">
                  功能编辑
        </p>
        <div>
            <Form class="step-form" ref="func" :model="func" :rules="funcRules" :label-width="100">
                <Row>
                    <FormItem label="上级菜单：">
                        <Col span="11">
                            <template>
                                <Select v-model="func.parentid" style="width: 447.5px">
                                    <Option v-for="par in parents" :label="par.functiontitle" :value="par.id" :key="par.id" v-if="par.grade == 0">
                                        <span>{{par.functiontitle}}</span>
                                        <span style="float:right;color:#ccc">{{par.grade}}</span>
                                    </Option>
                                </Select>
                            </template>
                        </Col>
                    </FormItem>
                </Row>
                <Row>
                    <FormItem label="功能类型：">
                        <template>
                            <RadioGroup v-model="func.functiontype">
                                <Radio :label="1">菜单</Radio>
                                <Radio :label="2">按钮</Radio>
                            </RadioGroup>
                        </template>
                    </FormItem>
                </Row>
                <Row>
                    <i-col span="12">
                        <FormItem label="功能标题：" prop="functiontitle">
                            <Input :disabled="hasSubmit" v-model="func.functiontitle" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入角色名称" />
                        </FormItem>
                    </i-col>
                </Row>
                <Row>
                    <i-col span="12">
                        <FormItem label="功能名称：" prop="functionname">
                            <Input :disabled="hasSubmit" v-model="func.functionname"  :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入角色编码" />
                        </FormItem>
                    </i-col>
                </Row>
                <Row>
                    <i-col span="12">
                        <FormItem label="功能路径：" prop="functionpath">
                            <Input :disabled="hasSubmit" v-model="func.functionpath"  :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入角色编码" />
                        </FormItem>
                    </i-col>
                </Row>
                <Row>
                    <i-col span="12">
                        <FormItem label="功能图标：">
                            <Input :disabled="hasSubmit" v-model="func.icon"  :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入角色编码" />
                        </FormItem>
                    </i-col>
                </Row>
                <Row>
                    <i-col span="12">
                        <FormItem label="功能等级：" prop="grade">
                            <InputNumber :max ="9" :min ="0" :disabled="hasSubmit" v-model="func.grade"  :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入角色编码" />
                        </FormItem>
                    </i-col>
                </Row>
                <Row>
                    <i-col span="12">
                        <FormItem label="功能排序：" prop="sort">
                            <InputNumber :max ="9" :min ="0" :disabled="hasSubmit" v-model="func.sort"  :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入角色编码" />
                        </FormItem>
                    </i-col>
                </Row>
                <Row>
                    <i-col span="12">
                        <FormItem label="备注：" prop="remark">
                            <Input :disabled="hasSubmit" v-model="func.remark" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入备注信息" />
                        </FormItem>
                    </i-col>
                </Row>
                <FormItem label="">
                    <Button :disabled="hasSubmit" @click="handleSubmit" style="width:100px;" type="primary">提交</Button>
                    <Button :disabled="hasSubmit" @click="goPreviousPage" style="width:100px;">返回</Button>
                </FormItem>
            </Form>
        </div>
    </Card>
    </div>
</template>

<script>
import ajax from '../../../../libs/axios.js'
export default {
    name: 'addrole',
    data () {
        return {
            func: {
                id: '',               // 表格id
                functionname: '',     // 功能名称
                functiontitle: '',    // 功能标题
                functionpath: '',     // 功能路径
                functiontype: '',     // 功能类型
                grade: 0,             // 功能等级
                sort: 0,              // 功能排序
                remark: '',           // 备注
                parentId: '0',        // 上级菜单
                icon: ''              // 功能图标
            },
            // 校验
            funcRules: {
                functiontitle: [
                    { required: true, message: '功能标题不能为空', trigger: 'blur' }
                ],
                functionname: [
                    { required: true, message: '功能名称不能为空', trigger: 'blur' }
                ],
                functionpath: [
                    { required: true, message: '功能路径不能为空', trigger: 'blur' }
                ],
                grade: [
                    { required: true, type: 'number', message: '功能等级不能为空', trigger: 'blur' }
                ],
                sort: [
                    { required: true, type: 'number', message: '请设置排序', trigger: 'blur' }
                ],
                remark: [
                    { required: true, message: '备注信息不能为空', trigger: 'blur' }
                ]
            },
            hasSubmit: false,
            parents: [],              // 上级菜单数据集
        }
    },
    created () {
        this.getParentInfos()
        this.init()
    },
    activated() {
        this.getParentInfos()
        this.init()
    },
    methods: {
        // 数据初始化
        init () {
            this.$store.commit('setActiveName', 'setfunctionindex');
            // 获取传递测参数
            let id = this.$route.params.id
            let url = 'adminlogin/function/selectById'
            let data = {
                id: id
            }
            ajax.formRes(url, data).then(res => {
                // success
                if(res.code == 200){
                    this.func = res.data
                }
            })
                .catch(res => {
                    console.log('有错误信息')
                })
        },
        // 提交按钮
        handleSubmit () {
            let that = this;
            this.$refs['func'].validate(valid => {
                if (valid) {
                    that.hasSubmit = true
                    let url = 'adminlogin/function/updateCjFunction'
                    let data = {
                        id: that.func.id,
                        functionname: that.func.functionname,
                        functiontitle: that.func.functiontitle,
                        functionpath: that.func.functionpath,
                        functiontype: that.func.functiontype,
                        grade: that.func.grade,
                        sort: that.func.sort,
                        remark: that.func.remark,
                        parentid: that.func.parentid,
                        icon: that.func.icon
                    }
                    ajax.formRes(url, data).then(res => {
                            // success
                            that.$Message.success('修改功能成功,页面正在跳转')
                            setTimeout(function () {
                                that.$router.push({
                                    name: 'setfunctionindex'
                                })
                            }, 1500)
                            that.hasSubmit = false
                        })
                        .catch(err => {
                            console.log('有错误信息')
                            // fail
                        })
                }
            })
        },
        // 获取菜单
        getParentInfos () {
            // 获取上级所有的菜单
            let url = 'adminlogin/function/selectFunctionMenu'
            let data = {}
            ajax.jsonRes(url, data).then(res => {
                // success
                this.parents = res.data
            })
                .catch(res => {
                    console.log('有错误信息')
                    // fail
                })
        },
        // 返回按钮
        goPreviousPage () {
            this.$router.go(-1)
        }
    },
}
</script>

<style lang="less">
    @import "../../../../styles/common.less";
    @import "../less/addrole.less";
</style>
